<script lang="ts" setup>
  import { ref, toRefs, reactive, watch } from 'vue';
  import { getRoleUnbindedUser, addRoleBindedUser } from '/@/api/role';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const loading = ref(false);
  const props = defineProps({
    visible: Boolean,
    roleId: Number,
  });
  const emit = defineEmits(['success', 'update:visible']);

  const { visible, roleId } = toRefs(props);

  const modal = reactive({
    title: '新增用户',
  });
  const modalActions = {
    close() {
      pgActions.reset();
      emit('update:visible');
    },
    async submit() {
      if (table.selected.length < 1) return;
      loading.value = true;
      const { code, msg } = await addRoleBindedUser({
        roleId: roleId?.value,
        userIds: table.selected.map((e: any) => e.userId),
      });
      if (code == 200) {
        createMessage({
          message: msg,
        });
        emit('update:visible');
        emit('success');
      }
    },
  };

  const searchForm = reactive({
    userName: '',
    userCode: '',
    mobile: '',
    email: '',
    autoFlag: '',
  });

  const pg = reactive({ current: 1, size: 20, total: 0 });
  const pgActions = {
    reset() {
      pg.current = 1;
      pg.size = 20;
    },
    currentChange(c) {
      pg.current = c;
      tableActions.getList();
    },
    sizeChange(r) {
      pg.current = 1;
      pg.size = r;
      tableActions.getList();
    },
  };

  const table = reactive({
    data: [],
    selected: [],
  });
  const tableActions = {
    async getList() {
      loading.value = true;
      const { data, code } = await getRoleUnbindedUser({
        roleId: roleId?.value,
        startIndex: pg.current,
        pageSize: pg.size,
        username: searchForm.userName,
        userNo: searchForm.userCode,
        mobile: searchForm.mobile,
        email: searchForm.email,
        autoFlag: searchForm.autoFlag,
      });
      loading.value = false;
      if (code == 200) {
        table.data = data.list;
        pg.total = data.total;
      }
    },
    selectionChange(r) {
      table.selected = r;
    },
  };

  watch(visible, (nv) => {
    if (nv) {
      tableActions.getList();
    }
  });
</script>

<template>
  <el-dialog v-model="visible" :title="modal.title" @close="modalActions.close" :width="1200">
    <el-form label-width="90px" inline>
      <el-row>
        <el-col :span="6">
          <el-form-item label="用户名">
            <el-input v-model="searchForm.userName" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户编号">
            <el-input v-model="searchForm.userCode" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号">
            <el-input v-model="searchForm.mobile" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮箱">
            <el-input v-model="searchForm.email" clearable />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="SF同步">
            <el-select v-model="searchForm.autoFlag" clearable>
              <el-option value="1" label="是" />
              <el-option value="0" label="否" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="tableActions.getList">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      class="mb-4"
      :data="table.data"
      v-loading="loading"
      @selection-change="tableActions.selectionChange"
      :header-cell-style="{ background: '#f1f3f7' }"
    >
      <el-table-column type="selection" fixed />
      <el-table-column label="用户名" prop="username" width="120" fixed />
      <el-table-column label="编号" prop="userNo" />
      <el-table-column label="邮箱" prop="email" />
      <el-table-column label="手机" prop="mobile" />
      <!-- <el-table-column label="SF同步" prop="mobile">
        <template #default="{ row }">
          {{ row.autoFlag == 1 ? '是' : '否' }}
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      class="flex justify-end"
      background
      layout="total, sizes, prev, pager, next"
      :total="pg.total"
      :current-page="pg.current"
      v-model:page-size="pg.size"
      @size-change="pgActions.sizeChange"
      @current-change="pgActions.currentChange"
      :page-sizes="[20, 30, 50]"
    />
    <template #footer>
      <div class="flex justify-end">
        <el-button @click="modalActions.close">取消</el-button>
        <el-button
          type="primary"
          @click="modalActions.submit"
          :disabled="table.selected.length == 0"
          :loading="loading"
          >确定</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped></style>
